<template>
	<div class="container-page">
		<div class="container-bdody flex_row">
			<div class="print-setting-content">
				<div class="setting-card" style="margin-top: 2px;" @click="handleClick({ id: 'print', text: '打印机' })"
					:class="{ 'active_sbg': currentMenu.id == 'print' }">
					<div class="setting-item">
						<div class="setting-label bold">打印机</div>
						<div class="setting-action">
							<el-button type="text" class="view-detail-btn">
								查看详情
								<i class="el-icon-arrow-right"></i>
							</el-button>
						</div>
					</div>
				</div>
				<div class="setting-card" @click="handleClick({ id: 'wxCode', text: '小程序码' })"
					:class="{ 'active_sbg': currentMenu.id == 'wxCode' }">
					<div class="setting-item" @click="handleClick({ id: 'wxCode', text: '小程序码' })">
						<div class="setting-label bold">小程序码</div>
						<div class="setting-value">
							<span class="value-text" v-if="printForm.qrcode_i">
								{{printTypeList.find(pr => pr.value == printForm.qrcode_i).label}}
							</span>
							<i class="el-icon-arrow-right"></i>
						</div>
					</div>
				</div>
				<div class="setting-section">
					<div class="section-title">
						<span class="font_size16 bold">模板设置</span>
						<span class="font_size12 font_black7">（选择订单使用的模版）</span>
					</div>
					<div class="template-list">
						<div class="template-item"
							v-for="(typeName, typeKey) in printForm.type_ls" :key="typeKey"
							@click="handleClick({ id: typeKey, text: typeName })"
							:class="{ 'active_sbg': currentMenu.id == typeKey }"
						>
							<div class="template-name bold">
								{{ typeName }}
							</div>
							<div class="template-action"
								@click.stop="handleTemClick({ type: typeKey, text: typeName, id: printForm.tpl[typeKey].id })">
								<span class="template-value">
									{{ printForm.tpl && printForm.tpl[typeKey] ? printForm.tpl[typeKey].title : '未设置' }}
								</span>
								<i class="el-icon-arrow-right"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="set-content">
				<componentsCom :currentMenu="currentMenu" :propData="propData" @success-handle="successHandle" />
			</div>
		</div>
		<printSettingDialog :propData="propData" ref="printSettingDialogRef" @success-handle="successPrintHandle" />
	</div>
</template>

<script setup>
import {
	ref,
	onMounted,
	getCurrentInstance,
	defineProps,
	defineEmits,
	watch,
	computed,
	provide,
	onBeforeUnmount
} from '@vue/composition-api'
import config from "@/js/conf/Config.js"
const { proxy } = getCurrentInstance()
import componentsCom from "@/pages/setting/module/basicSetting/components.vue"
import printSettingDialog from "@/pages/setting/components/printSettingDialog.vue"
import { printTypeList } from '@/utils/dict.js'

// 打印设置表单数据
const printForm = ref({})
const currentMenu = ref({
	id: 'print',
	text: '打印设置',
})

const propData = computed(() => {
	return {
		...printForm.value
	}
})

const printModuleSet = ref({})
provide('printModuleSet', printModuleSet)
const handleClick = (item) => {
	currentMenu.value.id = item.id
	currentMenu.value.text = item.text
	// 更新共享的打印模块设置数据
	if (printForm.value && printForm.value.tpl && printForm.value.tpl[item.id]) {
		printModuleSet.value = printForm.value.tpl[item.id]
	} else {
		printModuleSet.value = {}
	}
}

const printSettingDialogRef = ref(null)
const handleTemClick = (item) => {
	// if (currentMenu.value.id != item.type) {
	// 	return
	// }
	if (printSettingDialogRef.value) {
		printSettingDialogRef.value.open(item)
	}
}

proxy.$eventBus.$on('compsetPrintTplSave', (item) => {
	getCompsetPrintSet()
})

proxy.$eventBus.$on('changeTempSetting', (item) => {
	console.log('changeTempSetting-item=', item)
	printModuleSet.value = item
	getCompsetPrintSet()
})

const successPrintHandle = (data) => {
	getCompsetPrintSet()
	if(currentMenu.value.id != data.type) {
		return
	}
	printModuleSet.value = data
}

const getCompsetPrintSet = async () => {
	try {
		let res = await proxy.$api({ url: config.compset_print_set, data: {} })
		if (res.status == 1) {
			// 将接口返回的数据赋值给printData
			printForm.value = res.data
		}
	} catch (error) {
		console.error('获取打印设置失败:', error)
	}
}
getCompsetPrintSet()

const successHandle = (data) => {
	getCompsetPrintSet()
}

onMounted(() => {
	console.log('打印设置页面已加载')
})

onBeforeUnmount(() => {
	proxy.$eventBus.$off('compsetPrintTplSave')
	// proxy.$eventBus.$off('changeTempSetting')
})

</script>

<style lang="scss" scoped>
.container-page {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;

	.container-bdody {
		box-sizing: border-box;
		flex: 1;
		height: 0;
		min-height: 0;
		overflow-y: auto;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}

	.container-footer {
		border-top: 1px solid #f1f1f1;
		margin-top: 10px;
		padding: 14px 40px 14px;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10px);

		.summary-info {
			display: flex;
			align-items: center;
			gap: 16px;
		}

		.action-buttons {
			display: flex;
			gap: 12px;

			.btn-cancel {
				border-color: #cbd5e1;
				color: #64748b;
			}

			.btn-confirm {
				background-color: #3b82f6;
				border-color: #3b82f6;
				padding: 8px 24px;
				font-size: 14px;
				font-weight: 500;
				transition: all 0.3s ease;

				&:hover {
					background-color: #2563eb;
					border-color: #2563eb;
					transform: translateY(-1px);
					box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
				}

				&:active {
					transform: translateY(0);
				}
			}
		}
	}
}

.print-setting-content {
	width: 100%;
	max-width: 320px;
}

.set-content {
	padding-top: 2px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

.setting-card {
	background: rgba(255, 255, 255, 1);
	border-radius: 12px;
	margin-bottom: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	overflow: hidden;
	backdrop-filter: blur(10px);
	border: 1px solid #e2dede;


	&:hover {
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
		transform: translateY(-2px);
	}
}

.setting-item {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px;
	cursor: pointer;
	overflow: hidden;

	&:last-child {
		border-bottom: none;
	}

}

.setting-label {
	font-size: 16px;
	color: #333;
}

.setting-value {
	display: flex;
	align-items: center;
	color: #666;
	font-size: 14px;
	gap: 8px;
}

.setting-action {
	.view-detail-btn {
		display: flex;
		align-items: center;
		color: #3b82f6;
		font-size: 14px;
		gap: 4px;
	}
}

.setting-section {
	background: rgba(255, 255, 255, 1);
	border-radius: 12px;
	margin-bottom: 10px;
	padding: 14px 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid #e2dede;
}


.section-title {
	color: #333;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid #3b82f6;
	position: relative;

	&::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 60px;
		height: 2px;
		background: #3b82f6;
	}
}

.template-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.template-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	background: #fff;

	&:hover {
		border-color: #3b82f6;
		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
		transform: translateY(-1px);
	}
}

.template-name {
	font-size: 14px;
	color: #333;
}

.template-action {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #666;
	font-size: 14px;
}

.template-value {
	color: #666;
}

.print-options {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.value-text {
	color: #666;
}

.flex_between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.active_sbg {
	border: 1px solid #2563eb !important;

	.setting-label,
	.template-name {
		color: #2563eb !important;
	}
}
</style>
